<!-- ============================================================== -->
    <!-- Left Sidebar - style you can find in sidebar.scss  -->
    <!-- ============================================================== -->
    <div class="navbar-default sidebar" role="navigation" id='sidebar_app'>
      <div class="sidebar-nav slimscrollsidebar">
        <div class="sidebar-head">
          <h3><span class="fa-fw open-close"><i class="ti-close ti-menu"></i></span> <span class="hide-menu">导航</span></h3>
        </div>
        <div class="user-profile">
        </div>
        <!-- //课件管理 -->
        <ul class="nav" id="side-menu">
          <li class="active"> <a href="javascript:void(0);" class="waves-effect" @click='getside'><i class="fa fa-fw icon-docs"></i> <span class="hide-menu">课件管理<span class="fa arrow"></span> </span></a>
            <!-- //一级主题 -->
            <ul class="nav nav-second-level collapse in" aria-expanded='true'>
              <li :class="[checkIndex==index?'active':'']" v-for="(item,index) in tree" > 
                <a href="javascript:void(0);" @click='check(index)' :class="[checkIndex==index?'active':'']"><span class="hide-menu">{{item.name}}<span class="fa arrow"></span></span></a> 
                <!-- 二级主题 -->
                <ul class="nav nav-second-level level2"  v-show='show' v-if='checkIndex==index'>
                 <li v-for="(item1,index1) in item.child" :class="[checkIndex2==index1?'active':'']"> <a :href="'courseware_lists?course_id='+item1.id"  @click='check2(index1,item1.id)' :class="[checkIndex2==index1?'active':'']"><span class="hide-menu">{{item1.name}}</span></a>
                  <!-- //三级主题 -->
                  <!-- <ul class="nav nav-second-level level2"  v-show='show2' v-if='checkIndex2==index1'>
                    <li v-for="(item2,index2) in item1.child" :class="[checkIndex3==index2?'active':'']"> <a :href="'courseware_lists?course_id='+item2.id"  @click='check3(index2)' :class="[checkIndex3==index2?'active':'']"><span class="hide-menu">{{item2.name}}</span></a>
            
                     
                     </li> 
                    </ul> -->
                  </li> 
                 </ul>
              </li>
             
            </ul>
              </li>
             
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
     var vm = new Vue({
      el: '#sidebar_app',
      data() {
        return {
          tree:[],
          checkIndex:-1,
          checkIndex2:-1,
          checkIndex3:-1,
          show:false,
          show2:false,
        
        }
      },
      created(){
      var sidebar_left=JSON.parse(localStorage.getItem('sidebar_left'));
      console.log(sidebar_left)
      if(sidebar_left){
      
        // this.tree=sidebar_left.tree;
        this.checkIndex=sidebar_left.checkIndex;
        this.checkIndex2=sidebar_left.checkIndex2;
        this.show=sidebar_left.show;
        this.show2=sidebar_left.show2;
      }else{
      
      }
      this.init();
      },
      mounted(){
        
       
      },
      methods:{
        init(pid){
          axios.post('/dboard/teacheradmin/courseware_course_son', {pid},{headers: {'X-Requested-with':'XMLHttpRequest'}})
          .then(res => {
            this.tree=res.data.Data;
            console.log(this.tree)
          })
        },
        getside(){
          this.init();
        
          // localStorage.setItem('sidebar_left','')
        },
        check(index){
          if( this.checkIndex==index){
            this.checkIndex=-1;
            this.show=!this.show
            return
          }else{
            this.checkIndex=index;
            this.show=true;
          }
         
        },
        check2(index,id){
        
          if( this.checkIndex2==index){
            this.checkIndex2=-1;
            this.show2=!this.show2
            return
          }else{
            this.checkIndex2=index;
            this.show2=true;
          }
          var params={
            tree:this.tree,
            checkIndex:this.checkIndex,
            checkIndex2:this.checkIndex2,
            show:this.show,
            show2:this.show2
          }
          localStorage.setItem('sidebar_left',JSON.stringify(params))
        },
       
        
      }
    })
    
    
    </script>
  <style>
    .level2 {
    padding-left: 8px;
    }
    #side-menu li a{
      width: 100%;
    }
  </style>
